/* 头部样式 */
/* nav */
header .nav li a{
    color: #666666;
    padding-bottom: 20px;
    font-size:16px;
}
/* 选中效果 */
header .nav .two a{
    border-bottom:2px solid #00bdff;
    color: #00bdff;
}
/* 登录和注册 */
header .right-box a{
    padding:5px 16px;
    border:2px solid #666666;
    color:#666666;
    border-radius: 14px;
    float: left;
}
header .right-box .register{
    color: #ffffff;
}
/* 2.banner */
#banner{
    padding-top: 65px;
    height: 416px;
    background-color: #f1f1f1 ;
    box-sizing: border-box;
    position: relative;
}
#banner canvas{
    position: relative!important;
    z-index: 2!important;
    opacity: 0.2;
}
#banner .container{
    position: absolute;
    z-index: 66;
    margin-top: 36px;
    left:50%;
    /* CSS3平移效果 */
    transform: translateX(-50%);
}
#banner .pictureL{
    width: 260px;
    height: 274px;
    box-sizing: border-box;
    background-color: #fff;
    padding:56px  0;
    color: #d7d7d7;
    margin-right: 55px;
}

#banner .pictureL p .one{
    margin-right: 50px;
}
#banner .pictureL .two .num-one{
    display: inline-block;
    margin:0 33px 0 45px  ;
}
#banner .pictureL .two .num-two{
    display: inline-block;
    margin-right: 32px;
}
/* banner右边内容 */
#banner .contentR .line-one span:nth-child(1){
    font-weight: bold;
    color: #575757;
    vertical-align: -5px;
}
#banner .contentR .line-one .font13{
    color: #00bdff;
    display: inline-block;
    border: 2px solid #00bdff;
    padding:4px ;
}
#banner .contentR .little-box{
    margin:0 8px 0 13px ;
}
#banner .contentR .line-two{
    color: #f8aa39;
    margin: 12px 0;
}
#banner .contentR .line-two img{
    margin-right: 8px;
}
#banner .contentR .line-two .item-two{
    display: inline-block;
    margin-left: 36px;
}
#banner .contentR .line-three{
    color: #666666;
    margin-bottom: 18px;
}

#banner .contentR .line-five{
    color: #999999;
    margin-bottom: 40px;
}
#banner .contentR .line-five span{
    display: inline-block;
    margin-right: 7px;
}
#banner .contentR a{
    color: #ffffff;
    background-color: #00bdff;
    padding: 12px 26px;
}
#apiDetails{
    margin: 15px 0 10px;
}
#apiDetails li{
    float: left;
    height: 30px;
    line-height: 30px;
    padding:0 10px;
    border:1px solid #999999;
    margin-right: 15px;
    box-sizing: border-box;

    cursor: pointer;
}
#apiDetails li.default{
    border:1px solid #00bdff;
    color:#00bdff;
}

#apiDetails li.active{
    border:1px solid #00bdff;
    color:#00bdff;
    background: url(../imgs/select.png) no-repeat right bottom;
}

.title-right a{
    display: inline-block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color:#00bdff ;
    color: #fff;

}
/* 二维码 */
.qrcode{
    top: 30px;
    left: -2px;

    /* display: none;
     */

    height: 0px;
    overflow: hidden;
    transition: all 0.3s linear;
}
/* hover到 .default 让里面的qrcode显示出来 */
#apiDetails li.default:hover .qrcode{
    /* display: block; */

    height: 300px;
}


/* 3.API文档nav */
#docu-nav{
    width: 100%;
    height: 46px;
    border-bottom: 1px solid #f4f4f4;
}
#docu-nav ul li{
    float: left;
    line-height: 46px;
}
#docu-nav ul li .active{
    color: #00bdff;
    border-bottom: 3px solid #00bdff;
}
#docu-nav ul li a{
    color: #666666;
    margin-right: 108px;
    padding: 10px 0;
}
/* 4. API文档内容*/
#api-docu{
    height: 1355px;
    padding-top: 58px;
}
#api-docu .docu-left{
    width: 920px;
    height: 1000px;
    margin-left: 10px;
}
#api-docu .docu-right{
    width: 220px;
    height: 1000px;
}
#api-docu .test-tool p{
    margin-bottom: 22px;
    color: #777777;
}
#api-docu .test-tool p span{
    color: #555555;
    font-weight: bold;
}
#api-docu .test-tool a{
    display: inline-block;
    height: 35px;
    width: 150px;
    line-height: 35px;
    text-align: center;
    background-color: #00bdff;
    color: #ffffff;
}
.docu-left>div{
    display: none;
}
.docu-left div.on{
    display: block;
}
/* API文档内容,右边 */
.docu-right .little-title{
    margin-bottom: 14px;   
}
.docu-right .activity li{
    margin-bottom: 10px;
}
.docu-right .like li{
    height: 90px;
    border-bottom: 1px dashed #eeeeee;
    box-sizing: border-box;
    padding: 15px 0;
}
.docu-right .like .picture-box{
    width: 60px;
    height: 60px;
    border: 1px solid #eeeeee;
    margin-right: 10px;
    line-height: 60px;
    text-align: center;
}
.docu-right .like li:last-child{
    border: none;
}

/* 5.免费注册 */
#experience{
    width: 100%;
    height: 146px;
    background: 
    #33beff url(../imgs/login-register-bg.svg) no-repeat center;
    box-sizing: border-box;
    padding-top: 30px;
}
#experience a{
    display: inline-block;
    padding:10px 40px ;
    border: 1px solid #fff;
}